<template>
    <div class="home-page">
      <div class="content">
        <div class="left">
          <el-avatar :src="avatarUrl" size="large"></el-avatar>
          <h2>{{ nickname }}</h2>
          <p>{{ account }}</p>
          <div class="buttons">
            <el-button type="primary" @click="connectAccount('niuke')">连接牛客</el-button>
            <el-button type="primary" @click="connectAccount('luogu')">连接洛谷</el-button>
            <el-button type="primary" @click="connectAccount('leetcode')">连接力扣</el-button>
          </div>
        </div>
        <div class="right">
          <h3>已关联账号</h3>
          <ul>
            <li v-for="(account, index) in linkedAccounts" :key="index">{{ account.name }}: {{ account.url }}</li>
          </ul>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        avatarUrl: 'https://via.placeholder.com/150', // 替换为实际头像链接
        nickname: '你的昵称',
        account: '账号名称',
        linkedAccounts: [],
      };
    },
    methods: {
      connectAccount(type) {
        let url = '';
        switch (type) {
          case 'niuke':
            url = 'https://www.nowcoder.com/profile/your-profile';
            break;
          case 'luogu':
            url = 'https://www.luogu.com.cn/user/your-profile';
            break;
          case 'leetcode':
            url = 'https://leetcode.com/your-profile/';
            break;
        }
        this.linkedAccounts.push({ name: type, url });
      },
    },
  };
  </script>
  
  <style scoped>
  .home-page {
    background-image: url('../assets/bg2.png'); /* 替换为实际背景图片路径 */
    background-size: cover;
    background-position: center;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .content {
    width: 80%;
    display: flex;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  .left, .right {
    flex: 1;
    padding: 20px;
  }
  .left {
    text-align: center;
  }
  .buttons {
    margin-top: 20px;
  }
  </style>
  
